<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebVo</title>
<link rel="stylesheet" type="text/css" href="screenstyle.css" />
</head>
<script src="MochiKit/Base.js" type="text/javascript"></script>
<script src="MochiKit/Async.js" type="text/javascript"></script>
<script src="MochiKit/Logging.js" type="text/javascript"></script>
<script src="MochiKit/Iter.js" type="text/javascript"></script>
<script src="MochiKit/DOM.js" type="text/javascript"></script>
<script src="MochiKit/Signal.js" type="text/javascript"></script>
<script src="MochiKit/Color.js" type="text/javascript"></script>
<script src="MochiKit/Visual.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = init;

// Preliminary setup once page has completely loaded 
function init() {
    // Get an array of all the tv show table elements
    var showEls = getElementsByTagAndClassName('*','tvShow');
    // Connect up their onclick event handler
    map(function(el){ connect(el,'onclick',clickNRShow);}, showEls);
}

// Click handler for a show that is not being recorded
var clickNRShow = function(e) {
    msg = "This is an amazingly interesting show with all kinds of important details that you probably want to know about. For instance did you know that so and so stared in this film? It's true! Steven Sillyshorts directed. It airs on channel n+1 from time t = t_0 to t = t_1.\n\n\nDo you really want to record this show?";
    if(confirm(msg)) {
         
        //Tell server to start recording

        el = e.src();
        setNodeAttribute(el,'class','tvRecording');
        disconnectAll(el,'onclick');
        connect(el,'onclick',clickRShow);     
    }
};

// Click handler for a show that is being recorded
var clickRShow = function(e) {

    if(confirm("Do you want to stop recording?")) {

        // Tell server to stop recording 

        el = e.src();
        setNodeAttribute(el,'class','tvShow');
        disconnectAll(el,'onclick');
        connect(el,'onclick',clickNRShow);
    }
};

</script>
<body>
<div class="container">

<div class="titleblock"><h1>WebVo</h1><p>&ldquo;Engaging the Culture, Changing the World.&rdquo;</p></div>

<div><ul class="navbar">
		 <li><a href="proto.html" class="nav">TV Listing</a></li>
		 <li><a href="scheduled.html" class="nav">Scheduled</a></li>
		 <li><a href="recorded.html" class="nav">Recorded</a></li>
		 <li><a href="#" class="nav">About</a></li>
</ul></div>

<div class="content">
<div id="stats" style="text-align:right;">now recording: Lost | free/estimated: 10GB/9GB</div>
    <h2>TV Listing</h2>
    <form action="proto2.html" method="get">
        Hour 
        <select name="hour">
         <option value="0">12:00pm
         <option value="1">1:00pm
         <option value="2">2:00pm
        </select>
        Day
        <select name="date">
         <option value="0">Sunday
         <option value="1">Monday
         <option value="2">Tuesday
        </select>
        <input type="submit" value="Change" />
    </form>

	<table class='schedule' width='97%'>
	 <tr>
      <td class="tbhead" style="width:0">&laquo;</td>
	  <td class="tbhead" style="width:0">Ch.</td>
	  <td class="tbhead">12:00pm</td>
	  <td class="tbhead">12:30pm</td>
	  <td class="tbhead">1:00pm</td>
	  <td class="tbhead">1:30pm</td>
	  <td class="tbhead">2:00pm</td>
	  <td class="tbhead">2:30pm</td>
      <td class="tbhead" style="width:0"><a href="proto2.html">&raquo;</a></td>
	 <tr>
      <td class="tbhead" style="width:0">&laquo;</td>
	  <td bgcolor='#c2c2c2'>6</td>
	  <td class='tvShow'>CSI</td></div>
	  <td class='tvShow'>Murder, She Wrote</td>
	  <td class='tvShow' colspan=4>Battlestar Galactica</td>
      <td class="tbhead" style="width:0">&raquo;</td>
	 </tr>
	 <tr>
      <td class="tbhead" style="width:0">&laquo;</td>
	  <td bgcolor='#c2c2c2'>10</td>
	  <td class='tvShow' colspan=2>The X Files</td>
	  <td class='tvShow'>The Colbert Report</td>
	  <td class='tvShow' colspan=3>Gladiator</td>
      <td class="tbhead" style="width:0">&raquo;</td>
	 </tr>
     <tr>
      <td class="tbhead" style="width:0">&laquo;</td>
      <td class="tbhead" style="width:0">60</td>
      <td class="tvShow" colspan="6">The Lord of the Rings: The Return of the King</td>
      <td class="tbhead" style="width:0">&raquo;</td>
     </tr>
	</table>

</div>

<div class="footer">
  <div class="right">
    <p>&copy; 2006 Cylon Hackers</p>
    <p>Design by <strong><a href="http://www.oswd.org/user/profile/id/6345">Ad_267</a></strong></p>
    <!--<p><a href="http://validator.w3.org/check/referer">Validate XHTML 1.0 Strict</a></p>-->
  </div>
    <p>Email <a href="mailto:tim.disney@gmail.com">Webmaster</a></p>
    <p><a href="http://www.vayatele.com/2005/10/31-battlestar-galactica-habra-t.php">Image Credit</a></p>
</div>

</div>
</body>
</html>
